<template>
    <div id="body-padding">
        <p id="p">设置</p>
        <b>昵称</b> <br>
        <input type="text" v-model="name">
        <b>介绍</b> <br>
        <textarea v-model="introduce" cols="30" rows="10">
        </textarea>
        <router-link to="/new/passg">修改密码</router-link><br>
        <router-link :to="'/new/setting/'+id">修改头像</router-link> <br>
        <div >
            <button @click="btnClick" id="btn">保存设置</button>
        </div>
    </div>
</template>

<script>

export default {
    data:function(){
        return {
            name:"",
            introduce:"",
            id:""
        }
    },
    methods:{
        mount(){
            this.http.get("/users/setting")
            .then(res=>{
                if(res.data.err==5){
                    this.layer.msg("请先登录");
                    window.location.href = "http://localhost:8080/#/login";
                }
                if(res.data.err==0){
                    this.name= res.data.data.name;
                    this.introduce= res.data.data.introduce;
                    this.id= res.data.data._id;
                }
            })
        },
        btnClick(){
            var data = {
                name:this.name,
                introduce:this.introduce,
            };
            this.http.post("/users/setting",data)
            .then(res=>{
                if(res.data.err==5){
                    this.layer.msg("请先登录");
                    window.location.href = "http://localhost:8080/#/login";
                }
                if(res.data.err==0){
                    this.layer.msg("修改成功");
                    window.location.href = "http://localhost:8080/#/new/day/me";
                }
                
            })
        }
    },
    activated:function(){
        this.mount();
        this.$store.dispatch("word");
    }
}
</script>

<style scoped>
input,textarea{
    width: 100%;
    height: 40px;
    border-radius: 4px;
    border: solid 1px #ccc;
    box-shadow: 0 0 4px #ccc inset;
    margin: 8px 0;
    padding-left: 8px;
    font-size: 20px;
}
textarea{
    height: 150px;
}
input:hover,textarea:hover{
    border: solid 1px blue;
}
a{
    color: #06f;
}
/*#btn{
    text-align: center;
}
#btn button{
    padding: 5px 8px;
    border-radius: 4px;
    border: solid 1px #3399EE;
    font-size: 20px;
    margin: 20px;
    background-color: #3399EE;
    color: white;
}*/
</style>